import React from 'react';
import AttentionHeatmap from './AttentionHeatmap';
import PredictionTable from './PredictionTable';
import { AppState } from '../../types';

interface PredictionTabProps {
  model: AppState['model'];
  data: AppState['data'];
}

const PredictionTab: React.FC<PredictionTabProps> = ({ model, data }) => {
  const { predictionResult } = model;
  
  if (!predictionResult) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <p className="text-gray-500 mb-4">No predictions available yet</p>
          <p className="text-sm text-gray-400">
            Go to the Data Input tab and click "Analyze & Predict" to generate predictions
          </p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="space-y-6 p-4">
      <div className="grid gap-6 lg:grid-cols-2">
        <AttentionHeatmap 
          attentionWeights={predictionResult.attentionWeights}
          sequenceLength={data.sequenceLength}
        />
        
        <PredictionTable 
          prediction={predictionResult} 
        />
      </div>
    </div>
  );
};

export default PredictionTab;